<template>
	<view class="page">
		<view class="head" :style="{ height: selectData.navBarHeight + 'px', width: selectData.screenWidth + 'px' }">
			<view class="back_box" :style="{ height: selectData.navBarHeight + 'px' }">
				<!-- 状态栏 -->
				<view class="null"
					:style="{ height: selectData.statusBarHeight + 'px', width: selectData.screenWidth + 'px' }">
				</view>
				<!-- 返回 -->
				<view class="back"
					:style="{ top: selectData.statusBarHeight + 'px', width: selectData.screenWidth + 'px', height: selectData.navBarHeightTitle + 'px' }">
					<image @tap="goBack" class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/back.png"
						mode="aspectFit">
					</image>
					<text class="text ft-32 fw-800 c-33">{{
						'分享减免'
					}}</text>
					<view :style="{ width: (selectData.menuButtonRight ? selectData.menuButtonRight : 90) + 'px' }"
						style="color: aqua;height: 100px;">
					</view>
				</view>
				<view class="headerContent" :style="{ width: selectData.screenWidth + 'px' }">
					<view class="userTipsModel_bg"></view>
					<view class="userTipsModel">

						<view class="uni-margin-wrap">
							<swiper class="swiper bd-r30" circular :indicator-dots="indicatorDots"
								:autoplay="swiperInfo.autoplay" :interval="swiperInfo.interval"
								:duration="swiperInfo.duration" :vertical="swiperInfo.vertical" :circular="true">
								<swiper-item v-for="(item, index) in swiperInfo.swiperList" :key="index">
									<view class="userLeft" id="userLeft">
										<image class="userImg fs0" :src="item.img">
										</image>
										<text class="ft te-1 ml-4">{{ item.txt }}</text>
									</view>
								</swiper-item>

							</swiper>
						</view>
						<view class="userRight">
							<view class="tip ft" @tap="goToBack('shareReduction/shareReductionRule')">规则
								<image class="userImg"
									src="https://cdn.oss.bon-top.cn/static_bc/images/share-icon1.png">
								</image>
							</view>
							<view class="tip ft" @tap="goToBack('shareReduction/shareReductionDetail')">我的减免
								<image class="userImg"
									src="https://cdn.oss.bon-top.cn/static_bc/images/share-icon2.png">
								</image>
							</view>
						</view>
					</view>
				</view>

			</view>

		</view>
		<view :style="{ height: selectData.navBarHeight + 'px', width: selectData.screenWidth + 'px' }"></view>

		<!-- list -->
		<view class="list">
			<comLoadMord v-if="Object.keys(benefitShareList).length > 0" :dataList='benefitShareList'
				:pageInfo='pageInfo' @getDatas="getBenefitShareListFun">

				<view v-for="list in shareList" :key="list.id" class="list_model" id="ListModel"
					@tap="goToBack('immigration/immigration?id=' + list.id)">
					<!--  @tap="goToBack('immigration/immigration?id=' + list.id)" -->
					<view class="top">
						<view class="left">
							<image class="imgs bd-r40" :src="list.cover" mode="aspectFill">
							</image>
						</view>
						<view class="right">
							<view class="title_model">
								<view class="label label1 ft-20 flex-center fs0" v-for="label in list.recommends_show"
									:key="label">
									{{ label }}
								</view>
								<text class="text ft-32 ft1">{{ list.name }}</text>

							</view>
							<view class="money ft-20 mt-8">{{ list.currency_symbol || '' }}<span class="ft-36 ft-num">{{
								list.bc_price_show }}</span>{{ list.bc_price_unit }}</view>
							<view class="option_model flex-bwt mt-10">
								<view class="leftM">
									<view class="ft-24">{{ list.stage_num }}/{{ list.total_stage_num }}人</view>
									<text class="ft-22 c-66">{{ list.stage_txt }}</text>
									<view class="flex mt-12">
										<view class="leftM_child1 ft-24 c-ff pd-10 bd-r8">已获</view>
										<view class="leftM_child2 ft-24 c-33 pd-10 bd-r8"> ￥{{ list.reduce_money
										}}减免
										</view>
									</view>
								</view>
								<!-- <CustomShareButton :share-options="{
                                    title: '自定义标题',
                                    path: '/pages/detail?id=123',
                                    imageUrl: '/static/logo.jpg'
                                }" :on-success="handleSuccess" /> -->
								<view class="rightM c-ff bd-r20 mr-10" :class="!list.is_all ? 'rightM-active' : ''">
									<span v-if="!list.is_all" open-type="share">
										去分享
										<button open-type="share" class="hidden-share-btn"
											@tap.stop="onCustomShare(list.id, list)"></button>
									</span>
									<span v-else @tap.stop="goToBack('immigration/immigration?id=' + list.id)">
										去使用</span>
								</view>
							</view>
						</view>
					</view>
					<view class="bot-f">

						<view class="bottom flex bd-r20">

							<view v-for="(item, index) in list.stages" :key="index" class="bot_model pos-re"
								:style="{ width: list.botModelWindth + 'rpx' }">
								<u-line-progress :percentage="item.percentage" activeColor="#DBF046" height="6">

									<text class="u-percentage-slot"></text>
								</u-line-progress>

								<view class="titleM pos-ab flex-c-center">
									<image class="imgs" v-if="list.stage_num >= item.num"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon4.png">
									</image>
									<image class="imgs" v-else
										src="https://cdn.oss.bon-top.cn/static_bc/images/lock-icon.png">
									</image>

									<text class="fw-800" v-if="item.is_get">已获{{ item.reduce }}元</text>
									<text class="fw-800" v-else>{{ item.reduce }}元</text>
								</view>
							</view>

						</view>
					</view>
					<view class="ft-22 c-99 bot-tips" v-if="list.is_get">{{ list.end_time_txt }}</view>
				</view>


			</comLoadMord>

		</view>
	</view>


</template>
<script setup lang="js">
import {
	ref,
	reactive,
	onMounted,
	nextTick,
	getCurrentInstance
} from "vue";
import {
	utils
} from "@/utils/utils.js";
import {
	api
} from "@/utils/api.js";
import comLoadMord from '@/components/comLoadMord.vue'
import {
	onLoad,
	onUnload,
	onReady,
	onHide,
	onShareAppMessage,
	onShareTimeline
} from "@dcloudio/uni-app";

let pageInfo = reactive({
	currentPage: 1,
	pageSize: 10
})
const selectData = ref({})
onReady(async () => {
	// 计算宽高比
	let aspectRatio = ((630 / 2) / 370) * 100

	const systemInfo = uni.getSystemInfoSync()
	let statusBarHeight = systemInfo.statusBarHeight
	let screenWidth = systemInfo.screenWidth
	let menuButtonInfo = 0
	// #ifdef MP
	menuButtonInfo = wx.getMenuButtonBoundingClientRect();
	// #endif
	let navHeight = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
	let navBarHeight = parseInt((screenWidth * aspectRatio) / 100);//导航总高
	selectData.value = {
		headHeight: navHeight,
		screenWidth: screenWidth,
		statusBarHeight: statusBarHeight,
		navBarHeight: navBarHeight,//导航总高
		navBarHeightTitle: navHeight,//导航文字模块总高
		menuButtonRight: (screenWidth - menuButtonInfo.right) + menuButtonInfo.width,
	}
})

// 头部通知

let swiperInfo = reactive({
	autoplay: true,
	interval: 2000,
	duration: 500,
	indicatorDots: true,
	vertical: true,
	swiperList: []
})
const shareConfig = ref({
	title: '',
	path: '',
	imageUrl: '',
	queryParams: {} // 当前页面参数
})

const _options = ref({})
onLoad((options) => {
	getBenefitShareListFun()
	uni.showShareMenu({
		withShareTicket: true, // 是否使用带 shareTicket 的分享
		menus: ['shareAppMessage', 'shareTimeline'] // 显示分享按钮
	});
	// 通过分享页进入
	console.log('哈哈哈哈哈', options)
	if (options.queryParams?.id) {
		secondsStart.value = Math.floor(Date.now() / 1000)
		_options.value = options
		console.log('我是通过分享进来的', _options)


	}
})
// 请求浏览出发接口
const setShareVisit = (options) => {
	utils
		.request(
			api.shareVisit, {
			share_user_id: options.queryParams?.share_user_id,
			timestemp: options.timestemp,
			seconds: parseInt(secondsStart.value - secondsEnd.value),
			product_id: options.queryParams?.id
		},
			"get"
		)
		.then((res) => {

		});
}
onUnload(() => {
	console.log('我离开了=======》')
	if (shareConfig.value.timestemp > 0) {
		secondsEnd.value = Math.floor(Date.now() / 1000)
		setShareVisit(_options)
	}
})
// onHide(() => {
// 	console.log('我隐藏了=======》',)
// 	if (shareConfig.value.timestemp > 0) {
// 		secondsEnd.value = parseInt((new Date().getTime()) / 1000)
// 		setShareVisit(_options)
// 	}
// })
// 获取页面栈实例
const currentPages = getCurrentPages()
const currentRoute = currentPages[currentPages.length - 1]
const secondsStart = ref(0)
const secondsEnd = ref(0)
// 初始化分享参数
const initShareParams = (id) => {
	// 获取当前页面参数
	console.log('currentRoute', currentRoute.options)
	const query = currentRoute.options || {}
	if (!query.share_user_id) {
		const userInfo = uni.getStorageSync("userInfo")
		query.share_user_id = userInfo ? userInfo.id : ''
	}
	if (!query.id) query.id = id
	query.timestemp = parseInt((new Date().getTime()) / 1000)


	const queryString = Object.keys(query)
		.map(key => `${key}=${query[key]}`)
		.join('&')

	// 更新分享配置
	shareConfig.value = {
		...shareConfig.value,
		path: `subpackage/immigration/immigration?${queryString}`,
		// path:`${currentRoute.route}?${queryString}`,
		queryParams: query,

	}
	console.log('shareConfig.value', shareConfig.value)
}
// 自定义分享方法
const onCustomShare = (id, list) => {
	shareConfig.value.title = list.name
	shareConfig.value.imageUrl = list.cover
	initShareParams(id)
}
// 好友分享配置
onShareAppMessage(() => ({
	title: shareConfig.value.title,
	path: shareConfig.value.path,
	imageUrl: shareConfig.value.imageUrl,
	success(res) {
		uni.$emit('shareSuccess', {
			type: 'friend',
			data: shareConfig.value.queryParams
		})
	}
}))

// 朋友圈分享配置（需基础库2.11.3+）
onShareTimeline(() => ({
	title: shareConfig.value.title,
	query: shareConfig.value.path.split('?') || '',
	imageUrl: shareConfig.value.imageUrl
}))
//获取分享减免列表
const shareList = ref([])
const shareProgsList = ref([])
let benefitShareList = ref({})
const getBenefitShareListFun = () => {
	utils
		.request(
			api.getBenefitShareList, {
			page: pageInfo.currentPage,
			pageSize: pageInfo.pageSize,
			app_id: utils.app_id,
			identity: utils.identity
		},
			"get"
		)
		.then((res) => {
			benefitShareList.value = res.data
			shareList.value = [...shareList.value, ...benefitShareList.value.items]
			if (!shareList.value.length) return
			benefitShareList.value.listIsShow = true

			// 处理减免通知
			swiperInfo.swiperList =
				benefitShareList.value.success_list.reduce((a, b) => {
					let obj = {}
					obj.img = b.user_info.avatar ||
						"https://cdn.oss.bon-top.cn/static_bc/images/userLog.png"
					obj.txt = b.txt
					a.push(obj)
					return a
				}, [])
			nextTick(() => {
				const query = uni.createSelectorQuery();
				// 选择元素
				query.select('#ListModel').fields({
					size: true
				}, (res) => {
					const width = res.width;
					shareList.value.forEach((item) => {
						item['botModelWindth'] = (width / item.stages.length) * 2
						item['botModelProgWindth'] = (item['botModelWindth'] / 2) - (
							130 / 2)
						item.stages.forEach((sta, index) => {
							let _num = (item.stage_num / sta.num) * 100
							// 处理第一个值
							if (index == 0) {
								sta.percentage = item.stage_num == 0 ? 0 : _num >
									100 ? 100 : _num

							} else {
								// 上一个数据
								let lastChild = item.stages[index - 1]
								if (lastChild.percentage == 100) {
									// 如果上一个数据已完成 并且第二个任务完成一部分
									if (item.stage_num - lastChild.num > 0) {
										sta.percentage = item.stage_num == 0 ? 0 : _num >
											100 ? 100 : _num
									} else {
										sta.percentage = 0
									}
								} else {
									sta.percentage = 0

								}
							}
						})
						item['is_get'] = item.stages.some(e => e.is_get)
					})

				}).exec();
			})


		});
};

// 返回键
const goBack = () => {
	uni.navigateBack(-1)
}
// 对应跳转
const goToBack = (url) => {
	uni.navigateTo({
		url: '/subpackage/' + url
	})
}
</script>

<style lang="scss" scoped>
.header_box_slot {
	height: 500rpx;
	background-color: red;
	bottom: 0;

}


.head {
	background-image: url('https://cdn.oss.bon-top.cn/static_bc/images/shareHead.png');
	background-size: 100% 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;

	.back_box {
		position: relative;

		.bg {
			height: 290rpx;
			position: absolute;
			top: 0;
			left: 0;
			background: linear-gradient(180deg, #FFF3EC 0%, rgba(251, 255, 223, 0) 100%);

		}

		.back {
			// position: absolute;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			overflow: hidden;

			.text {
				width: 366rpx;
				text-align: center;

			}
		}

		.headerContent {
			// padding: 30rpx 26rpx;
			// background-color: red;
			position: absolute;
			bottom: 0;
			left: 0;
			height: 112rpx;

			.msg_box {
				margin-top: 20rpx;

				.msg_box_item {
					height: 52rpx;
					line-height: 52rpx;
					padding: 0 20rpx;
					border-radius: 20rpx;
					background-color: #F8F8F8;
					margin-right: 20rpx;
					justify-content: flex-start;
					display: flex;
					align-items: center;
				}
			}

			.userTipsModel_bg {
				backdrop-filter: blur(30rpx);
				background-color: rgba(255, 255, 255, 0.3);
				border-radius: 40rpx 40rpx 0 0;

			}

			.userTipsModel,
			.userTipsModel_bg {
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 112rpx;
			}


			.userTipsModel {
				display: flex;
				align-items: center;
				// justify-items: ;
				justify-content: space-between;
				flex-shrink: 1;

				.swiper {
					height: 52rpx;
					overflow: hidden;
					width: 400rpx;
					background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255));


					.userLeft {
						width: 380rpx;
						height: 52rpx;
						display: flex;
						align-items: center;
						padding-left: 20rpx;
						// padding-right: 10rpx;
						box-sizing: border-box;

						.userImg {
							width: 38rpx;
							height: 38rpx;
							border-radius: 50%;
						}

					}
				}


				.userRight {
					width: 290rpx;
					height: 52rpx;
					line-height: 52rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-right: 30rpx;

					.tip {
						height: 100%;
						background-color: #fff;
						border-radius: 30rpx;
						padding: 0 10px;
						display: flex;
						align-items: center;
					}

					.userImg {
						width: 22rpx;
						height: 22rpx;
						border-radius: 50%;
						margin-left: 5rpx;

					}
				}
			}
		}
	}

	.icon {
		width: 28rpx;
		height: 48rpx;
		margin-left: 30rpx;
		margin-right: auto;
	}
}

.list {
	padding-bottom: 20rpx;

	.list_model {
		margin: 0 30rpx;
		margin-top: 30rpx;
		border-radius: 40rpx;
		border: 2rpx solid #F1F1F1;
		background-color: #fff;

		.top {
			display: flex;
			align-items: center;

			.left {
				margin: 20rpx;

				.imgs {
					width: 222rpx;
					height: 274rpx;
				}
			}

			.right {
				flex: 1;
				// background-color: red;
				width: 100rpx;

				.title_model {
					display: flex;
					align-items: center;

					.label {
						border-radius: 8rpx;
						padding: 0 4rpx;
						height: 36rpx;
						display: inline-block;
						line-height: 36rpx;
						box-sizing: border-box;
						margin-right: 4rpx;
						color: #333333;
						background: linear-gradient(to right, #DBF046, #FFEE7E);

					}

					.text {
						width: 50%;
						/* 显示省略符号来代表被修剪的文本 */
						text-overflow: ellipsis;
						/* 防止文本换行 */
						white-space: nowrap;
						/* 隐藏溢出的内容 */
						overflow: hidden;
						margin-left: 10rpx;

					}



				}

				.option_model {
					width: 100%;

					.leftM {
						display: flex;
						flex-direction: column;

						.leftM_child1 {
							background-color: #333;

						}

						.leftM_child2 {
							background: linear-gradient(to right, #DBF046, #FFEE7E);

						}
					}

					.rightM {
						width: 124rpx;
						height: 78rpx;
						line-height: 78rpx;
						text-align: center;
						background-color: #333;

						position: relative;

						.hidden-share-btn {
							opacity: 0;
							position: absolute;
							width: 100%;
							height: 100%;
							left: 0;
							top: 0;
						}


					}

					.rightM-active {
						background-color: #DBF046;
						color: #333;
					}
				}
			}
		}

		.bot-f {
			padding: 20rpx;

			.bottom {
				background-color: #FBFFDF;
				padding: 20rpx;
				height: 78rpx;


				.bot_model {
					// height: 118rpx;
					height: 100%;
					margin-top: 26rpx;

					.imgs {
						width: 30rpx;
						height: 30rpx;
					}
				}

				.titleM {
					top: -8rpx;
					width: 100%;
					white-space: nowrap;

				}

			}
		}

		.bot-tips {
			text-align: center;
			width: 100%;
			// height: 52rpx;
			// line-height: 52rpx;
			margin: 20rpx 0;
		}

	}
}
</style>